<template>
  <div class="member-section">
    <div class="section-header">
      <h2 class="section-title">
        队伍成员
        <span class="section-sub">({{ members.length }}/{{ teamMax || 0 }}人)</span>
      </h2>
      <span class="section-remain">剩余名额：{{ Math.max((teamMax || 0) - members.length, 0) }}人</span>
    </div>

    <div class="cards-grid">
      <div v-for="(member, index) in members" :key="member.student?.userId || index" class="card card-shadow hover-lift" :class="member.student?.studentId === props.currentStudentId ? 'card-leader' : ''" @click="handleClick(member.student)">
        <div class="card-body">
          <img :src="resolveAvatar(member.student?.user?.avatar)" :alt="member.student?.user?.nickname || '头像'" class="avatar" @error="onAvatarError" />
          <div class="card-main">
            <div class="name-row">
              <h3 class="name">{{ member.student?.user?.nickName }}</h3>
              <span class="badge" :class="isLeader?.studentId === member.student?.studentId ? 'badge-leader' : 'badge-member'">
                {{ isLeader?.studentId === member.student?.studentId ? '队长' : '队员' }}
              </span>
            </div>
            <p class="meta">{{ member.student?.major?.majorName || '未知专业' }} | {{ member.student?.grade?.gradeName || '未知年级' }}</p>
            <p class="meta">学号：{{ member.student?.stuId || '未填写' }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref, watch, computed } from 'vue'
import defaultAvatar from '@/assets/images/profile.jpg'

const props = defineProps({
  teamInfo: { type: Object, default: () => ({}) },
  currentStudentId: { type: [String, Number], default: null },
  currentStuId: { type: [String, Number], default: null }
})

const members = ref([])
const teamMax = ref(0)
// 初始化：完全基于 props.teamInfo 映射
function initFromProps() {
  teamMax.value = Number(props.teamInfo?.team?.group?.teamMax ?? 0)
  members.value = props.teamInfo?.team?.studentTeams || []
}
const isLeader = computed(() => props.teamInfo?.team?.studentTeams?.find(st => st.isLeader === '1'))

// 监听 teamInfo（而不是 teamId），立即初始化并跟随更新
watch(
  () => props.teamInfo,
  () => {
    initFromProps()
  },
  { immediate: true, deep: true }
)

// 当当前用户标识变化时，重新计算高亮
watch(
  () => [props.currentStudentId, props.currentStuId],
  () => {
    initFromProps()
  }
)

function resolveAvatar(src) {
  console.log(src)
  if (typeof src !== 'string') return defaultAvatar
  const s = src.trim()
  if (!s || s === 'null' || s === 'undefined') return defaultAvatar
  return import.meta.env.VITE_APP_BASE_API + s
}

function onAvatarError(e) {
  if (e && e.target) {
    e.target.onerror = null
    e.target.src = defaultAvatar
  }
}
</script>

<style scoped>
.member-section {
  background-color: transparent;
  margin-top: 40px;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--el-color-primary);
}

.section-sub {
  margin-left: 8px;
  font-size: 14px;
  color: #909399;
  font-weight: normal;
}

.section-remain {
  font-size: 12px;
  color: #909399;
}

.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .cards-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  border-left: 4px solid transparent;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.card-leader {
  border-left-color: var(--el-color-primary);
}

.card-shadow {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.hover-lift:hover {
  transform: translateY(-2px);
}

.card-body {
  display: flex;
  align-items: flex-start;
}

.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.card-main {
  margin-left: 12px;
  flex: 1;
}

.name-row {
  display: flex;
  align-items: center;
}

.name {
  font-size: 16px;
  font-weight: 500;
}

.badge {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 12px;
}

.badge-leader {
  background-color: #ecf5ff;
  color: var(--el-color-primary);
}

.badge-member {
  background-color: #f2f3f5;
  color: #606266;
}

.meta {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.actions {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
